<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>宠物仓库</title>
    <!--网站图标-->
    <link rel="shortcut icon" href="../../images/favicon.ico">
    <!-- 样式 -->
    <link rel="stylesheet" href="../../css/self_users.css">
    <link rel="stylesheet" href="../../element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="../../js/vue.js"></script>
    <!-- 引入axios库 -->
    <script src="../../js/axios.min.js"></script>
    <script src="../../element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <el-button @click="goMain" type="success" plain>回主页面</el-button>
    <h1 style="text-align: center;margin: 20px auto;">账户管理</h1>

    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

        <!--基本信息-->
        <div>
            <el-form-item label="账户" prop="name">
                <el-input v-model="ruleForm.userAccount" style="width: 200px"
                          placeholder="用来登录，慎重修改"></el-input>
            </el-form-item>

            <el-form-item label="昵称" prop="name">
                <el-input v-model="ruleForm.userName" style="width: 200px"></el-input>
            </el-form-item>

            <el-form-item label="性别" prop="resource">
                <el-radio-group v-model="ruleForm.userSex">
                    <el-radio label="男" value="1" checked></el-radio>
                    <el-radio label="女" value="0"></el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="简介" prop="desc">
                <el-input type="textarea" v-model="ruleForm.userIntroduction" style="width: 500px"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="update_1" style="margin: 10px auto">修改</el-button>
            </el-form-item>
        </div>
        <hr>
        <!--领养需要的信息：真实姓名、电话、地址-->
        <div>
            <el-form-item label="真实姓名" prop="name">
                <el-input v-model="ruleForm.userRealname" style="width: 200px"></el-input>
            </el-form-item>

            <el-form-item label="联系电话" prop="name">
                <el-input v-model="ruleForm.userPhone" style="width: 200px"></el-input>
            </el-form-item>

            <el-form-item label="地址" prop="name">
                <el-input v-model="ruleForm.userAddress" style="width: 500px"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="update_2" style="margin: 10px auto">修改</el-button>
            </el-form-item>
        </div>

    </el-form>
    <hr>
    <!--密码-->
    <el-form :model="pwd" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <div>
            <el-form-item label="旧密码">
                <el-input type="password" v-model="pwd.passwordOld" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item label="新密码">
                <el-input type="password" v-model="pwd.passwordNew" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item label="确认新密码">
                <el-input type="password" v-model="pwd.checkPassword" style="width: 200px"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="update_3" style="margin: 10px auto">修改</el-button>
            </el-form-item>
        </div>
    </el-form>
</div>
</body>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                //表单数据
                ruleForm: {},
                //密码
                pwd: {
                    passwordOld: '',
                    passwordNew: '',
                    checkPassword: '',
                }
            };
        },
        //创建好对象时候执行的构造函数
        created() {
            this.getUserData();
        },
        methods: {
            //修改密码
            update_3() {
                //输入校验

                if (this.pwd.passwordOld != this.ruleForm.userPassword) {
                    this.$message.error("密码错误");
                    return;
                }

                if (this.pwd.passwordNew == null || this.pwd.passwordNew == '' ||
                    this.pwd.checkPassword == null || this.pwd.checkPassword == '') {

                    this.$message.error("请输入新密码");
                    return;
                }
                if (this.pwd.passwordNew != this.pwd.checkPassword) {
                    this.$message.error("两次输入的密码不一致");
                    return;
                }


                this.$confirm('密码修改成功后会跳转到登录界面, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    //确定
                    //新密码
                    console.log("校验通过，新密码：" + this.pwd.passwordNew);

                    //赋值
                    this.ruleForm.userPassword = this.pwd.passwordNew;

                    //性别不提交
                    this.ruleForm.userSex = null;

                    //提交修改
                    this.putUser("100");

                    console.log("开始修改密码")
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            },
            //修改真实姓名、地址、手机
            update_2() {
                //输入校验
                if(!(/^.{2,35}$/.test(this.ruleForm.userRealname)) || this.ruleForm.userRealname=='' ||this.ruleForm.userRealname==null){
                    this.$message.error("请填入真实姓名");
                    console.log("姓名不通过");
                    return;
                }
                if(!(/^1[3-9]\d{9}$/.test(this.ruleForm.userPhone))){
                    this.$message.error("请填入正确的手机号");
                    console.log("手机号不通过");
                    return;
                }
                if(!(/^.{15,150}$/.test(this.ruleForm.userAddress))){
                    this.$message.error("请填入正确的地址");
                    console.log("地址不通过");
                    return;
                }

                //性别不提交
                this.ruleForm.userSex = null;

                //发起请求
                this.putUser();
            },
            //修改基本信息
            update_1() {
                //输入校验
                if(!(/^[A-Za-z0-9_]{2,15}$/.test(this.ruleForm.userAccount)) || this.ruleForm.userAccount=='' ||this.ruleForm.userAccount==null){
                    this.$message.error("账户为2-15位字母数字下划线");
                    console.log("账户不通过");
                    return;
                }
                if(!(/^.{4,15}$/.test(this.ruleForm.userName))){
                    this.$message.error("昵称为4-15位字符");
                    console.log("昵称不通过");
                    return;
                }
                if(!(/^.{6,50}$/.test(this.ruleForm.userIntroduction))){
                    this.$message.error("简介为6-50位字符");
                    console.log("昵称不通过");
                    return;
                }

                console.log("校验通过")
                //数据转换
                if (this.ruleForm.userSex == '男') {
                    this.ruleForm.userSex = 1;
                }
                if (this.ruleForm.userSex == '女') {
                    this.ruleForm.userSex = 0;
                }
                console.log("看看数据先：" + this.ruleForm.userSex);

                //发起请求
                this.putUser();

            },
            //修改账户信息
            putUser(flag) {
                const _this = this;

                axios.put("/users/", this.ruleForm).then(
                    function (response) {
                        //获取到响应信息
                        console.log(response.data);

                        if (response.data.code == 1) {
                            _this.$message({
                                message: '修改成功！',
                                type: 'success'
                            });

                            //如果是修改密码
                            if (100 == flag) {
                                //退出登录发出请求,把用户信息移除session
                                axios.post("/users/logout", {}).then(
                                    function (response) {

                                    },
                                    function (err) {
                                        //控制台打印信息
                                        console.log(err);
                                    });
                                window.location.href = '/web/page/login/login.html'
                            }

                        } else {
                            //请求失败，进行提示
                            _this.$message.error(response.data.msg);
                        }
                    },
                    function (err) {
                        //请求失败，友好的提示框
                        _this.$message.error("服务器烦恼，请稍后重试");
                        //控制台打印信息
                        console.log(err);
                    });
            },

            //获取用户信息
            getUserData() {
                const _this = this;
                const _windows = window;

                axios.get("/users").then(
                    function (response) {
                        if(response.data.msg=="NoLogin!"){
                            //没有登录
                            _windows.location.href = '/web/page/login/login.html';
                        }

                        //获取到响应信息
                        console.log("看看拿到了什么" + response.data.code);
                        console.log("看看拿到了什么" + response.data.data.userName);
                        if (response.data.code == 1) {
                            //响应成功，赋值
                            _this.ruleForm = response.data.data;
                            return;
                        }
                        //获取失败则显示提示信息
                        _this.$message.error(response.data.msg);
                    },
                    function (err) {
                        //请求失败，友好的提示框
                        _this.$message.error("服务器烦恼，请稍后重试");
                        //控制台打印信息
                        console.log(err);
                    });
            },

            //状态数据转换
            formatStatus(row) {
                if (row.userStatus == 0) {
                    return '正常'
                }
                if (row.userStatus == 1) {
                    return '申领中'
                }
                if (row.userStatus == 2) {
                    return '未知'
                }
                if (row.userStatus == 3) {
                    return '暂停使用'
                }
            },
            //性别数据转换
            formatSex(row) {
                if (row.userSex == 1) {
                    return "小哥哥";
                } else if (row.userSex == 0) {
                    return '小姐姐';
                } else {
                    return '未设置';
                }
            },
            //类型转换：0普通用户、1管理员、2领养人
            formatType(row) {
                if (row.userType == 0) {
                    return "普通用户"
                } else if (row.userType == 1) {
                    return "管理员"
                } else if (row.userType == 2) {
                    return "领养人"
                }
            },
            //性格转换
            formatPersonality(row) {
                if (row.petPersonality == 1) {
                    return "外向";
                } else {
                    return "内向";
                }
            },

            //回主界面
            goMain() {
                //页面跳转
                window.location.href = '/web/page/main/main.html'
            },
        }
    })
</script>
</html>
